<template>
    <div class="basic-info card">
        <div class="title">工作情况</div>
        <div class="form-box">
            <el-form :model="formInline" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="24" :xs="24">
                        <el-form-item label="在职情况">
                            <el-radio-group v-model="formInline.isWork" class="ml-4">
                                <el-radio :label="1" size="large">在职人员</el-radio>
                                <el-radio :label="0" size="large">待职人员</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="工作单位">
                            <el-tree-select v-model="formInline.deptId" :data="deptListData"
                                :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                                placeholder="请选择归属部门" check-strictly />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :xs="24">
                        <el-form-item label="参加工作时间" label-width="120px">
                            <el-date-picker v-model="formInline.workTime" type="date" placeholder="请选择参加工作时间" clearable
                                format="YYYY/MM/DD" value-format="YYYY-MM-DD HH:mm:ss" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" :xs="24">
                        <el-form-item label="从事职业">
                            <el-select v-model="formInline.postIds" multiple placeholder="请选择从事职业" clearable>
                                <el-option v-for="item in postListData" :key="item.postId" :label="item.postName"
                                    :value="item.postId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="text-center">
                <div style="width: 164px;"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useVModel } from '@vueuse/core'
import { listPostOptionSelect, listDeptTree } from '@/api/system/user'
const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['update:modelValue']);
const formInline = useVModel(props, 'modelValue', emit)

const postListData = ref([])
function getPostList() {
    listPostOptionSelect().then(res => {
        postListData.value = res.data
    })
}
getPostList()

const deptListData = ref([])
function getDeptList() {
    listDeptTree().then(res => {
        deptListData.value = res.data
    })
}
getDeptList()

</script>
<style scoped lang="scss">
.basic-info {
    padding: 19px 16px;

    :deep(.el-form) {
        .el-date-editor {
            --el-date-editor-width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }

    .form-box {
        display: flex;
        column-gap: 20px;
    }
}
</style>